
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangbao"></use>
                    </svg>
                    <div class="name">上报</div>
                    <div class="fontclass">#icon-shangbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan1"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-shangchuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongju"></use>
                    </svg>
                    <div class="name">工具</div>
                    <div class="fontclass">#icon-gongju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontfile"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#icon-iconfontfile</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon123"></use>
                    </svg>
                    <div class="name">向下</div>
                    <div class="fontclass">#icon-icon123</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lockoutline"></use>
                    </svg>
                    <div class="name">lock-outline</div>
                    <div class="fontclass">#icon-lockoutline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenbaolishi"></use>
                    </svg>
                    <div class="name">申报历史</div>
                    <div class="fontclass">#icon-shenbaolishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofang"></use>
                    </svg>
                    <div class="name">播放</div>
                    <div class="fontclass">#icon-bofang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wechat1193418easyiconnet"></use>
                    </svg>
                    <div class="name">wechat_1193418_easyicon.net</div>
                    <div class="fontclass">#icon-wechat1193418easyiconnet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo1193419easyiconnet"></use>
                    </svg>
                    <div class="name">weibo_1193419_easyicon.net</div>
                    <div class="fontclass">#icon-weibo1193419easyiconnet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paizhao"></use>
                    </svg>
                    <div class="name">拍照</div>
                    <div class="fontclass">#icon-paizhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-angledoubleleft"></use>
                    </svg>
                    <div class="name">angle-double-left</div>
                    <div class="fontclass">#icon-angledoubleleft</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-angledoubleright"></use>
                    </svg>
                    <div class="name">angle-double-right</div>
                    <div class="fontclass">#icon-angledoubleright</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-angleleft"></use>
                    </svg>
                    <div class="name">angle-left</div>
                    <div class="fontclass">#icon-angleleft</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-angleright"></use>
                    </svg>
                    <div class="name">angle-right</div>
                    <div class="fontclass">#icon-angleright</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji2"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-heilongjiangtubiao09"></use>
                    </svg>
                    <div class="name">折线图</div>
                    <div class="fontclass">#icon-heilongjiangtubiao09</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-accountbalance"></use>
                    </svg>
                    <div class="name">account_balance</div>
                    <div class="fontclass">#icon-accountbalance</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-accountbalancewallet"></use>
                    </svg>
                    <div class="name">account_balance_wallet</div>
                    <div class="fontclass">#icon-accountbalancewallet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-accountbox"></use>
                    </svg>
                    <div class="name">account_box</div>
                    <div class="fontclass">#icon-accountbox</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-accountcircle"></use>
                    </svg>
                    <div class="name">account_circle</div>
                    <div class="fontclass">#icon-accountcircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add1"></use>
                    </svg>
                    <div class="name">add</div>
                    <div class="fontclass">#icon-add1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-addalarm"></use>
                    </svg>
                    <div class="name">add_alarm</div>
                    <div class="fontclass">#icon-addalarm</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-assessment"></use>
                    </svg>
                    <div class="name">assessment</div>
                    <div class="fontclass">#icon-assessment</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-assignment"></use>
                    </svg>
                    <div class="name">assignment</div>
                    <div class="fontclass">#icon-assignment</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-assignmentind"></use>
                    </svg>
                    <div class="name">assignment_ind</div>
                    <div class="fontclass">#icon-assignmentind</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-beenhere"></use>
                    </svg>
                    <div class="name">beenhere</div>
                    <div class="fontclass">#icon-beenhere</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-assistant"></use>
                    </svg>
                    <div class="name">assistant</div>
                    <div class="fontclass">#icon-assistant</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-assistantphoto"></use>
                    </svg>
                    <div class="name">assistant_photo</div>
                    <div class="fontclass">#icon-assistantphoto</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-book"></use>
                    </svg>
                    <div class="name">book</div>
                    <div class="fontclass">#icon-book</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-businesscenter"></use>
                    </svg>
                    <div class="name">business_center</div>
                    <div class="fontclass">#icon-businesscenter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera1"></use>
                    </svg>
                    <div class="name">camera</div>
                    <div class="fontclass">#icon-camera1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cardmembership"></use>
                    </svg>
                    <div class="name">card_membership</div>
                    <div class="fontclass">#icon-cardmembership</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cardtravel"></use>
                    </svg>
                    <div class="name">card_travel</div>
                    <div class="fontclass">#icon-cardtravel</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clear"></use>
                    </svg>
                    <div class="name">clear</div>
                    <div class="fontclass">#icon-clear</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-confirmationnumber"></use>
                    </svg>
                    <div class="name">confirmation_number</div>
                    <div class="fontclass">#icon-confirmationnumber</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-devicehub"></use>
                    </svg>
                    <div class="name">device_hub</div>
                    <div class="fontclass">#icon-devicehub</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daterange"></use>
                    </svg>
                    <div class="name">date_range</div>
                    <div class="fontclass">#icon-daterange</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-description"></use>
                    </svg>
                    <div class="name">description</div>
                    <div class="fontclass">#icon-description</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-directionsbike"></use>
                    </svg>
                    <div class="name">directions_bike</div>
                    <div class="fontclass">#icon-directionsbike</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-directionscar"></use>
                    </svg>
                    <div class="name">directions_car</div>
                    <div class="fontclass">#icon-directionscar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-directionsrailway"></use>
                    </svg>
                    <div class="name">directions_railway</div>
                    <div class="fontclass">#icon-directionsrailway</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-directionsrun"></use>
                    </svg>
                    <div class="name">directions_run</div>
                    <div class="fontclass">#icon-directionsrun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-directionssubway"></use>
                    </svg>
                    <div class="name">directions_subway</div>
                    <div class="fontclass">#icon-directionssubway</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-eventavailable"></use>
                    </svg>
                    <div class="name">event_available</div>
                    <div class="fontclass">#icon-eventavailable</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-eventnote"></use>
                    </svg>
                    <div class="name">event_note</div>
                    <div class="fontclass">#icon-eventnote</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-donutsmall"></use>
                    </svg>
                    <div class="name">donut_small</div>
                    <div class="fontclass">#icon-donutsmall</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-explore"></use>
                    </svg>
                    <div class="name">explore</div>
                    <div class="fontclass">#icon-explore</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-extension"></use>
                    </svg>
                    <div class="name">extension</div>
                    <div class="fontclass">#icon-extension</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folder"></use>
                    </svg>
                    <div class="name">folder</div>
                    <div class="fontclass">#icon-folder</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-foldershared"></use>
                    </svg>
                    <div class="name">folder_shared</div>
                    <div class="fontclass">#icon-foldershared</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folderspecial"></use>
                    </svg>
                    <div class="name">folder_special</div>
                    <div class="fontclass">#icon-folderspecial</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gpsfixed"></use>
                    </svg>
                    <div class="name">gps_fixed</div>
                    <div class="fontclass">#icon-gpsfixed</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image1"></use>
                    </svg>
                    <div class="name">image</div>
                    <div class="fontclass">#icon-image1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-importcontacts"></use>
                    </svg>
                    <div class="name">import_contacts</div>
                    <div class="fontclass">#icon-importcontacts</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-insertphoto"></use>
                    </svg>
                    <div class="name">insert_photo</div>
                    <div class="fontclass">#icon-insertphoto</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-laptopmac"></use>
                    </svg>
                    <div class="name">laptop_mac</div>
                    <div class="fontclass">#icon-laptopmac</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-layers"></use>
                    </svg>
                    <div class="name">layers</div>
                    <div class="fontclass">#icon-layers</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-localplay"></use>
                    </svg>
                    <div class="name">local_play</div>
                    <div class="fontclass">#icon-localplay</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-localcafe"></use>
                    </svg>
                    <div class="name">local_cafe</div>
                    <div class="fontclass">#icon-localcafe</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-localflorist"></use>
                    </svg>
                    <div class="name">local_florist</div>
                    <div class="fontclass">#icon-localflorist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-locallibrary"></use>
                    </svg>
                    <div class="name">local_library</div>
                    <div class="fontclass">#icon-locallibrary</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-locationhistory"></use>
                    </svg>
                    <div class="name">location_history</div>
                    <div class="fontclass">#icon-locationhistory</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-map"></use>
                    </svg>
                    <div class="name">map</div>
                    <div class="fontclass">#icon-map</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-message"></use>
                    </svg>
                    <div class="name">message</div>
                    <div class="fontclass">#icon-message</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nature"></use>
                    </svg>
                    <div class="name">nature</div>
                    <div class="fontclass">#icon-nature</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moviefilter"></use>
                    </svg>
                    <div class="name">movie_filter</div>
                    <div class="fontclass">#icon-moviefilter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nextweek"></use>
                    </svg>
                    <div class="name">next_week</div>
                    <div class="fontclass">#icon-nextweek</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-payment"></use>
                    </svg>
                    <div class="name">payment</div>
                    <div class="fontclass">#icon-payment</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-permcontactcalendar"></use>
                    </svg>
                    <div class="name">perm_contact_calendar</div>
                    <div class="fontclass">#icon-permcontactcalendar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-photo"></use>
                    </svg>
                    <div class="name">photo</div>
                    <div class="fontclass">#icon-photo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pindrop"></use>
                    </svg>
                    <div class="name">pin_drop</div>
                    <div class="fontclass">#icon-pindrop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remove"></use>
                    </svg>
                    <div class="name">remove</div>
                    <div class="fontclass">#icon-remove</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-print"></use>
                    </svg>
                    <div class="name">print</div>
                    <div class="fontclass">#icon-print</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-recentactors"></use>
                    </svg>
                    <div class="name">recent_actors</div>
                    <div class="fontclass">#icon-recentactors</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-school"></use>
                    </svg>
                    <div class="name">school</div>
                    <div class="fontclass">#icon-school</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-security"></use>
                    </svg>
                    <div class="name">security</div>
                    <div class="fontclass">#icon-security</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-settings"></use>
                    </svg>
                    <div class="name">settings</div>
                    <div class="fontclass">#icon-settings</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-toys"></use>
                    </svg>
                    <div class="name">toys</div>
                    <div class="fontclass">#icon-toys</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-viewcompact"></use>
                    </svg>
                    <div class="name">view_compact</div>
                    <div class="fontclass">#icon-viewcompact</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wbincandescent"></use>
                    </svg>
                    <div class="name">wb_incandescent</div>
                    <div class="fontclass">#icon-wbincandescent</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weizhi"></use>
                    </svg>
                    <div class="name">位置</div>
                    <div class="fontclass">#icon-weizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontduigou"></use>
                    </svg>
                    <div class="name">正确</div>
                    <div class="fontclass">#icon-iconfontduigou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loada"></use>
                    </svg>
                    <div class="name">load-a</div>
                    <div class="fontclass">#icon-loada</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tishi1"></use>
                    </svg>
                    <div class="name">提示</div>
                    <div class="fontclass">#icon-tishi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pinglun"></use>
                    </svg>
                    <div class="name">评论</div>
                    <div class="fontclass">#icon-pinglun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-yonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuye"></use>
                    </svg>
                    <div class="name">主页</div>
                    <div class="fontclass">#icon-zhuye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiyong"></use>
                    </svg>
                    <div class="name">启用</div>
                    <div class="fontclass">#icon-qiyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuzhi"></use>
                    </svg>
                    <div class="name">组织</div>
                    <div class="fontclass">#icon-zuzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daoru"></use>
                    </svg>
                    <div class="name">导入</div>
                    <div class="fontclass">#icon-daoru</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-3"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#icon-3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-expand"></use>
                    </svg>
                    <div class="name">展开</div>
                    <div class="fontclass">#icon-expand</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjian1"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#icon-wenjian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq-copy"></use>
                    </svg>
                    <div class="name">qq</div>
                    <div class="fontclass">#icon-qq-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchuguanbicha"></use>
                    </svg>
                    <div class="name">删除 关闭 叉</div>
                    <div class="fontclass">#icon-shanchuguanbicha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-calendarclock"></use>
                    </svg>
                    <div class="name">calendar-clock</div>
                    <div class="fontclass">#icon-calendarclock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clipboardaccount"></use>
                    </svg>
                    <div class="name">clipboard-account</div>
                    <div class="fontclass">#icon-clipboardaccount</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paizhao1"></use>
                    </svg>
                    <div class="name">拍照</div>
                    <div class="fontclass">#icon-paizhao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-renshu-copy"></use>
                    </svg>
                    <div class="name">人数</div>
                    <div class="fontclass">#icon-renshu-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiandai"></use>
                    </svg>
                    <div class="name">钱袋</div>
                    <div class="fontclass">#icon-qiandai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanping"></use>
                    </svg>
                    <div class="name">全屏</div>
                    <div class="fontclass">#icon-quanping</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xin"></use>
                    </svg>
                    <div class="name">心</div>
                    <div class="fontclass">#icon-xin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera"></use>
                    </svg>
                    <div class="name">视频</div>
                    <div class="fontclass">#icon-camera</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban-copy"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjian2"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#icon-wenjian2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiahaog"></use>
                    </svg>
                    <div class="name">加号</div>
                    <div class="fontclass">#icon-jiahaog</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan2"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-shangchuan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-new"></use>
                    </svg>
                    <div class="name">new</div>
                    <div class="fontclass">#icon-new</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zan"></use>
                    </svg>
                    <div class="name">赞</div>
                    <div class="fontclass">#icon-zan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-androidarrowdropdown"></use>
                    </svg>
                    <div class="name">android-arrow-dropdown</div>
                    <div class="fontclass">#icon-androidarrowdropdown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-androidarrowdropup"></use>
                    </svg>
                    <div class="name">android-arrow-dropup</div>
                    <div class="fontclass">#icon-androidarrowdropup</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duoxuanyixuan"></use>
                    </svg>
                    <div class="name">多选-已选</div>
                    <div class="fontclass">#icon-duoxuanyixuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiao03"></use>
                    </svg>
                    <div class="name">不通过</div>
                    <div class="fontclass">#icon-tubiao03</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi1"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-xiaoxi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangjia"></use>
                    </svg>
                    <div class="name">上架</div>
                    <div class="fontclass">#icon-shangjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiajia"></use>
                    </svg>
                    <div class="name">下架</div>
                    <div class="fontclass">#icon-xiajia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan"></use>
                    </svg>
                    <div class="name">找回密码查看icon</div>
                    <div class="fontclass">#icon-chakan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pengyouquan"></use>
                    </svg>
                    <div class="name">朋友圈</div>
                    <div class="fontclass">#icon-pengyouquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paixingbang"></use>
                    </svg>
                    <div class="name">排行榜</div>
                    <div class="fontclass">#icon-paixingbang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xunzhang"></use>
                    </svg>
                    <div class="name">勋章</div>
                    <div class="fontclass">#icon-xunzhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                    <div class="name">weibo</div>
                    <div class="fontclass">#icon-weibo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wechat"></use>
                    </svg>
                    <div class="name">wechat</div>
                    <div class="fontclass">#icon-wechat</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiangbei"></use>
                    </svg>
                    <div class="name">奖杯</div>
                    <div class="fontclass">#icon-jiangbei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                    <div class="name">qq</div>
                    <div class="fontclass">#icon-qq</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenhe"></use>
                    </svg>
                    <div class="name">审核</div>
                    <div class="fontclass">#icon-shenhe</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-erweima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiazai"></use>
                    </svg>
                    <div class="name">加载</div>
                    <div class="fontclass">#icon-jiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-xiaoxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengzhao"></use>
                    </svg>
                    <div class="name">证照</div>
                    <div class="fontclass">#icon-zhengzhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gdoc"></use>
                    </svg>
                    <div class="name">gdoc</div>
                    <div class="fontclass">#icon-gdoc</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image"></use>
                    </svg>
                    <div class="name">image</div>
                    <div class="fontclass">#icon-image</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-video"></use>
                    </svg>
                    <div class="name">video</div>
                    <div class="fontclass">#icon-video</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tupian"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#icon-tupian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanjing-bi"></use>
                    </svg>
                    <div class="name">眼睛-闭</div>
                    <div class="fontclass">#icon-yanjing-bi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanjing-zheng"></use>
                    </svg>
                    <div class="name">眼睛-睁</div>
                    <div class="fontclass">#icon-yanjing-zheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiazai1"></use>
                    </svg>
                    <div class="name">加载</div>
                    <div class="fontclass">#icon-jiazai1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-rili</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jifen"></use>
                    </svg>
                    <div class="name">积分 (1)</div>
                    <div class="fontclass">#icon-jifen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                    <div class="name">右</div>
                    <div class="fontclass">#icon-you</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuichu"></use>
                    </svg>
                    <div class="name">28退出</div>
                    <div class="fontclass">#icon-tuichu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fabu"></use>
                    </svg>
                    <div class="name">发布</div>
                    <div class="fontclass">#icon-fabu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                    <div class="name">视频</div>
                    <div class="fontclass">#icon-shipin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinyong"></use>
                    </svg>
                    <div class="name">禁用</div>
                    <div class="fontclass">#icon-jinyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shijian1"></use>
                    </svg>
                    <div class="name">时间</div>
                    <div class="fontclass">#icon-shijian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tishi"></use>
                    </svg>
                    <div class="name">提示</div>
                    <div class="fontclass">#icon-tishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cha"></use>
                    </svg>
                    <div class="name">叉</div>
                    <div class="fontclass">#icon-cha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jijianfasong"></use>
                    </svg>
                    <div class="name">16寄件、发送</div>
                    <div class="fontclass">#icon-jijianfasong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiala1"></use>
                    </svg>
                    <div class="name">下拉</div>
                    <div class="fontclass">#icon-xiala1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-shangchuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiala11"></use>
                    </svg>
                    <div class="name">下拉</div>
                    <div class="fontclass">#icon-xiala11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili1"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-rili1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoqing"></use>
                    </svg>
                    <div class="name">表情</div>
                    <div class="fontclass">#icon-biaoqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_wrong"></use>
                    </svg>
                    <div class="name">错误</div>
                    <div class="fontclass">#icon-icon_wrong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-permission"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-permission</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangzhu"></use>
                    </svg>
                    <div class="name">帮助</div>
                    <div class="fontclass">#icon-bangzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-activity"></use>
                    </svg>
                    <div class="name">activity</div>
                    <div class="fontclass">#icon-activity</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-activity_fill"></use>
                    </svg>
                    <div class="name">activity_fill</div>
                    <div class="fontclass">#icon-activity_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-addpeople_fill"></use>
                    </svg>
                    <div class="name">addpeople_fill</div>
                    <div class="fontclass">#icon-addpeople_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-addressbook_fill"></use>
                    </svg>
                    <div class="name">addressbook_fill</div>
                    <div class="fontclass">#icon-addressbook_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-addressbook"></use>
                    </svg>
                    <div class="name">addressbook</div>
                    <div class="fontclass">#icon-addressbook</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-barrage_fill"></use>
                    </svg>
                    <div class="name">barrage_fill</div>
                    <div class="fontclass">#icon-barrage_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-brush_fill"></use>
                    </svg>
                    <div class="name">brush_fill</div>
                    <div class="fontclass">#icon-brush_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-businesscard_fill"></use>
                    </svg>
                    <div class="name">businesscard_fill</div>
                    <div class="fontclass">#icon-businesscard_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close"></use>
                    </svg>
                    <div class="name">close</div>
                    <div class="fontclass">#icon-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-computer_fill"></use>
                    </svg>
                    <div class="name">computer_fill</div>
                    <div class="fontclass">#icon-computer_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-coordinates_fill"></use>
                    </svg>
                    <div class="name">coordinates_fill</div>
                    <div class="fontclass">#icon-coordinates_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-customerservice_fill"></use>
                    </svg>
                    <div class="name">customerservice_fill</div>
                    <div class="fontclass">#icon-customerservice_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-customerservice"></use>
                    </svg>
                    <div class="name">customerservice</div>
                    <div class="fontclass">#icon-customerservice</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-document"></use>
                    </svg>
                    <div class="name">document</div>
                    <div class="fontclass">#icon-document</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-document_fill"></use>
                    </svg>
                    <div class="name">document_fill</div>
                    <div class="fontclass">#icon-document_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dynamic_fill"></use>
                    </svg>
                    <div class="name">dynamic_fill</div>
                    <div class="fontclass">#icon-dynamic_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-enter"></use>
                    </svg>
                    <div class="name">enter</div>
                    <div class="fontclass">#icon-enter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-enterinto"></use>
                    </svg>
                    <div class="name">enterinto</div>
                    <div class="fontclass">#icon-enterinto</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-feedback_fill"></use>
                    </svg>
                    <div class="name">feedback_fill</div>
                    <div class="fontclass">#icon-feedback_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flag_fill"></use>
                    </svg>
                    <div class="name">flag_fill</div>
                    <div class="fontclass">#icon-flag_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-group"></use>
                    </svg>
                    <div class="name">group</div>
                    <div class="fontclass">#icon-group</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-group_fill"></use>
                    </svg>
                    <div class="name">group_fill</div>
                    <div class="fontclass">#icon-group_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-headlines_fill"></use>
                    </svg>
                    <div class="name">headlines_fill</div>
                    <div class="fontclass">#icon-headlines_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-headlines"></use>
                    </svg>
                    <div class="name">headlines</div>
                    <div class="fontclass">#icon-headlines</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-integral_fill"></use>
                    </svg>
                    <div class="name">integral_fill</div>
                    <div class="fontclass">#icon-integral_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-interactive_fill"></use>
                    </svg>
                    <div class="name">interactive_fill</div>
                    <div class="fontclass">#icon-interactive_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-interactive"></use>
                    </svg>
                    <div class="name">interactive</div>
                    <div class="fontclass">#icon-interactive</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lock_fill"></use>
                    </svg>
                    <div class="name">lock_fill</div>
                    <div class="fontclass">#icon-lock_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mail_fill"></use>
                    </svg>
                    <div class="name">mail_fill</div>
                    <div class="fontclass">#icon-mail_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-manage_fill"></use>
                    </svg>
                    <div class="name">manage_fill</div>
                    <div class="fontclass">#icon-manage_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more"></use>
                    </svg>
                    <div class="name">more</div>
                    <div class="fontclass">#icon-more</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-people_fill"></use>
                    </svg>
                    <div class="name">people_fill</div>
                    <div class="fontclass">#icon-people_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-people"></use>
                    </svg>
                    <div class="name">people</div>
                    <div class="fontclass">#icon-people</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-praise_fill"></use>
                    </svg>
                    <div class="name">praise_fill</div>
                    <div class="fontclass">#icon-praise_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qrcode_fill"></use>
                    </svg>
                    <div class="name">qrcode_fill</div>
                    <div class="fontclass">#icon-qrcode_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-return"></use>
                    </svg>
                    <div class="name">return</div>
                    <div class="fontclass">#icon-return</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-scan"></use>
                    </svg>
                    <div class="name">scan</div>
                    <div class="fontclass">#icon-scan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-select"></use>
                    </svg>
                    <div class="name">select</div>
                    <div class="fontclass">#icon-select</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-setup_fill"></use>
                    </svg>
                    <div class="name">setup_fill</div>
                    <div class="fontclass">#icon-setup_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-task"></use>
                    </svg>
                    <div class="name">task</div>
                    <div class="fontclass">#icon-task</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-task_fill"></use>
                    </svg>
                    <div class="name">task_fill</div>
                    <div class="fontclass">#icon-task_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tasklist_fill"></use>
                    </svg>
                    <div class="name">tasklist_fill</div>
                    <div class="fontclass">#icon-tasklist_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tasklist"></use>
                    </svg>
                    <div class="name">tasklist</div>
                    <div class="fontclass">#icon-tasklist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-undo"></use>
                    </svg>
                    <div class="name">undo</div>
                    <div class="fontclass">#icon-undo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unlock"></use>
                    </svg>
                    <div class="name">unlock</div>
                    <div class="fontclass">#icon-unlock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-workbench_fill"></use>
                    </svg>
                    <div class="name">workbench_fill</div>
                    <div class="fontclass">#icon-workbench_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-workbench"></use>
                    </svg>
                    <div class="name">workbench</div>
                    <div class="fontclass">#icon-workbench</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jifen1"></use>
                    </svg>
                    <div class="name">积分</div>
                    <div class="fontclass">#icon-jifen1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                    <div class="name">search</div>
                    <div class="fontclass">#icon-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu1"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingwei"></use>
                    </svg>
                    <div class="name">定位</div>
                    <div class="fontclass">#icon-dingwei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-packup"></use>
                    </svg>
                    <div class="name">packup</div>
                    <div class="fontclass">#icon-packup</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unfold"></use>
                    </svg>
                    <div class="name">unfold</div>
                    <div class="fontclass">#icon-unfold</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diannao1"></use>
                    </svg>
                    <div class="name">电脑</div>
                    <div class="fontclass">#icon-diannao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji1"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili2"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-rili2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fangkuai"></use>
                    </svg>
                    <div class="name">方块</div>
                    <div class="fontclass">#icon-fangkuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kecheng"></use>
                    </svg>
                    <div class="name">课程</div>
                    <div class="fontclass">#icon-kecheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anquan"></use>
                    </svg>
                    <div class="name">安全</div>
                    <div class="fontclass">#icon-anquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongji"></use>
                    </svg>
                    <div class="name">统计</div>
                    <div class="fontclass">#icon-tongji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Group"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#icon-Group</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huodong"></use>
                    </svg>
                    <div class="name">活动</div>
                    <div class="fontclass">#icon-huodong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhankai"></use>
                    </svg>
                    <div class="name">展开</div>
                    <div class="fontclass">#icon-zhankai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoudong"></use>
                    </svg>
                    <div class="name">手动</div>
                    <div class="fontclass">#icon-shoudong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanjing"></use>
                    </svg>
                    <div class="name">眼睛</div>
                    <div class="fontclass">#icon-yanjing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangsheng"></use>
                    </svg>
                    <div class="name">上升</div>
                    <div class="fontclass">#icon-shangsheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanlian"></use>
                    </svg>
                    <div class="name">关联</div>
                    <div class="fontclass">#icon-guanlian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhankai-copy"></use>
                    </svg>
                    <div class="name">展开</div>
                    <div class="fontclass">#icon-zhankai-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiala"></use>
                    </svg>
                    <div class="name">下拉</div>
                    <div class="fontclass">#icon-xiala</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daohang1"></use>
                    </svg>
                    <div class="name">导航</div>
                    <div class="fontclass">#icon-daohang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pingjia"></use>
                    </svg>
                    <div class="name">评价</div>
                    <div class="fontclass">#icon-pingjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guize"></use>
                    </svg>
                    <div class="name">规则</div>
                    <div class="fontclass">#icon-guize</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-gengduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rightl"></use>
                    </svg>
                    <div class="name">rightl</div>
                    <div class="fontclass">#icon-rightl</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left"></use>
                    </svg>
                    <div class="name">left</div>
                    <div class="fontclass">#icon-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuihui"></use>
                    </svg>
                    <div class="name">退回2</div>
                    <div class="fontclass">#icon-tuihui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danxuan"></use>
                    </svg>
                    <div class="name">单选</div>
                    <div class="fontclass">#icon-danxuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconzhong-"></use>
                    </svg>
                    <div class="name">批量</div>
                    <div class="fontclass">#icon-iconzhong-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima2"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-erweima2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_boss_fill"></use>
                    </svg>
                    <div class="name">icon_boss_fill</div>
                    <div class="fontclass">#icon-icon_boss_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_people_fill"></use>
                    </svg>
                    <div class="name">icon_people_fill</div>
                    <div class="fontclass">#icon-icon_people_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_recorder_fill"></use>
                    </svg>
                    <div class="name">icon_recorder_fill</div>
                    <div class="fontclass">#icon-icon_recorder_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zan1"></use>
                    </svg>
                    <div class="name">赞</div>
                    <div class="fontclass">#icon-zan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucang"></use>
                    </svg>
                    <div class="name">收 藏</div>
                    <div class="fontclass">#icon-shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_conf_call_fill"></use>
                    </svg>
                    <div class="name">icon_conf_call_fill</div>
                    <div class="fontclass">#icon-icon_conf_call_fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuanzhong"></use>
                    </svg>
                    <div class="name">选中</div>
                    <div class="fontclass">#icon-xuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixuanzhongdanxuan"></use>
                    </svg>
                    <div class="name">未选中（单选）</div>
                    <div class="fontclass">#icon-weixuanzhongdanxuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuanzhongdanxuan"></use>
                    </svg>
                    <div class="name">选中（单选）</div>
                    <div class="fontclass">#icon-xuanzhongdanxuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima1"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-erweima1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixuanzhong"></use>
                    </svg>
                    <div class="name">未选中 (1)</div>
                    <div class="fontclass">#icon-weixuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-html"></use>
                    </svg>
                    <div class="name">html</div>
                    <div class="fontclass">#icon-html</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ranqifei"></use>
                    </svg>
                    <div class="name">燃气费</div>
                    <div class="fontclass">#icon-ranqifei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add-user"></use>
                    </svg>
                    <div class="name">用户添加</div>
                    <div class="fontclass">#icon-add-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remove-user"></use>
                    </svg>
                    <div class="name">用户删除</div>
                    <div class="fontclass">#icon-remove-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit-user"></use>
                    </svg>
                    <div class="name">用户修改</div>
                    <div class="fontclass">#icon-edit-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-setting-user"></use>
                    </svg>
                    <div class="name">用户设置</div>
                    <div class="fontclass">#icon-setting-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user-approval"></use>
                    </svg>
                    <div class="name">用户审批</div>
                    <div class="fontclass">#icon-user-approval</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user-list"></use>
                    </svg>
                    <div class="name">用户列表</div>
                    <div class="fontclass">#icon-user-list</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user-group"></use>
                    </svg>
                    <div class="name">用户组</div>
                    <div class="fontclass">#icon-user-group</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                    <div class="name">right</div>
                    <div class="fontclass">#icon-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-shouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouyexuanzhong"></use>
                    </svg>
                    <div class="name">首页 选中</div>
                    <div class="fontclass">#icon-shouyexuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuwuxuanzhong"></use>
                    </svg>
                    <div class="name">服务 选中  </div>
                    <div class="fontclass">#icon-fuwuxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dangxiaoxuanzhong"></use>
                    </svg>
                    <div class="name">党校 选中</div>
                    <div class="fontclass">#icon-dangxiaoxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuwu"></use>
                    </svg>
                    <div class="name">服务 </div>
                    <div class="fontclass">#icon-fuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dangxiao"></use>
                    </svg>
                    <div class="name">党校 </div>
                    <div class="fontclass">#icon-dangxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jifenxuanzhong"></use>
                    </svg>
                    <div class="name">积分 选中 1</div>
                    <div class="fontclass">#icon-jifenxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jifen-copy"></use>
                    </svg>
                    <div class="name">积分  </div>
                    <div class="fontclass">#icon-jifen-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode"></use>
                    </svg>
                    <div class="name">我的 </div>
                    <div class="fontclass">#icon-wode</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodexuanzhong"></use>
                    </svg>
                    <div class="name">我的 选中</div>
                    <div class="fontclass">#icon-wodexuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-test"></use>
                    </svg>
                    <div class="name">1</div>
                    <div class="fontclass">#icon-icon-test</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-test1"></use>
                    </svg>
                    <div class="name">2</div>
                    <div class="fontclass">#icon-icon-test1</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
